<template>
	<view class="content_box">
		<u-navbar :is-back="true" title="自我介绍" :title-bold="true" :border-bottom="false" title-color="#000" back-icon-name="arrow-left">
			<view class="mr30 f28" slot="right" style="color: #333333;" @click="addUserInfo">
				保存
			</view>
		</u-navbar>

		<view class="introduce-center ">
			<view class="box h300 r10">
				<u-input :clearable="false" placeholder="输入想说的话..." maxlength="30"
					v-model="userInfo.introduceOneself" type="textarea" :border="false" />
			</view>
			<view class="flex justify-between align-center mt28">
				<view class="">

				</view>
				<view class="f24" style="color: #666666;">
					{{num}}/30
				</view>
			</view>
		</view>

		<view class="foot_box"></view>
		<!-- 加载提示 -->
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<!-- 信息提示-->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num: 0,
				value: '',
				userInfo: {},
			};
		},
		onShow() {},
		onLoad(e) {
			this.getUserInfo()
		},
		watch: {
			value(newValue, oldValue) {
				this.num = newValue.length
			}
		},
		methods: {
			async addUserInfo() {
				console.log('this.userInfo.introduceOneself.length0',this.userInfo.introduceOneself.length)
				if ( this.userInfo.introduceOneself.length <= 0) return this.l.msgg('内容不能为空！')
				
				const res = await this.$u.put('api/user/modifyUser', {
					introduceOneself: this.userInfo.introduceOneself,
				})
				if (res.code == 200) {
					this.getUserInfo()
					this.l.msgg(res.msg)
				}
			},
			
			async getUserInfo() {
				const res = await this.$u.get('api/user/queryUser')
				this.userInfo = res.data
			},
		}
	};
</script>

<style lang="scss" scoped>
	.content_box {

		.introduce-center {
			padding: 30rpx;

			.box {
				font-size: 28rpx;
				padding: 30rpx;
				background-color: #F7F5F7;
			}
		}
	}
</style>
